<template>
  <div class="flex1 leftCont">
    <!-- 导航切换 -->
    <div class="task-left1 flex">
      <div
        class="btn-cur"
        :class="{styleNames:index == curts}"
        v-for="(item,index) in curItem"
        :key="index"
        @click="curTop(index)"
      >{{item.title}}</div>
    </div>

    <!-- 筛选 -->
    <div class="task-left2 mt10 flex">
      <!-- <div>
        类型:
        <el-select v-model="taskType" placeholder="请选择" @change="taskTypes">
          <el-option
            v-for="(item,index) in typeList"
            :key="index"
            :label="item.taskType"
            :value="item.taskType"
          ></el-option>
        </el-select>
      </div>-->
      <div class="mlr20">
        <el-input v-model="keyword" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
      </div>
      <div>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="app-container">
      <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="来源" align="center" prop="appName" :show-overflow-tooltip="true" />
        <el-table-column label="标题" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <router-link :to="'/task/detail/'+ scope.row.businessKey" class="link-type">
              <span @click="handleClick(scope.row)">{{ scope.row.formName }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="taskType"
          :filters="this.filterTask"
          :filter-method="filterHandler"
        ></el-table-column>
        <el-table-column
          label="结果"
          align="center"
          prop="processStatusName"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="接收时间" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="期限" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope" v-if="replactJson(scope.row.overdueStatus)">
            {{replactJson(scope.row.overdueStatus).overdueTime}}
            <span
              style="color:red;"
            >({{replactJson(scope.row.overdueStatus).overdueStatus}})</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="pagination"
      />
    </div>
  </div>
</template>

<script>
import {
  listType,
  getType,
  delType,
  addType,
  updateType,
  refreshCache,
} from '@/api/system/dict/type'
import { getSession, getAppingTasks, getApplyedTasks } from '@/api/task/index'
import Cookies from 'js-cookie'
export default {
  name: 'Dict',
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 表格数据
      typeList: [],
      typeLists: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        dictName: [
          { required: true, message: '字典名称不能为空', trigger: 'blur' },
        ],
        dictType: [
          { required: true, message: '字典类型不能为空', trigger: 'blur' },
        ],
      },
      filterTask: [
        { text: '请假', value: '请假' },
        { text: '采购', value: '采购' },
      ],
      curts: 1,
      curItem: [
        { id: 0, title: '待办' },
        { id: 1, title: '已办任务' },
      ],
      taskType: '',
      sessions: '',
      keyword: '',
    }
  },
  created() {
    this.getLogSession()
    this.getApplyedList()
  },
  methods: {
    getLogSession() {
      getSession({
        username: localStorage.getItem('job_number'),
        pwd: '888888',
      })
        .then((response) => {
          this.sessions = response.data.username
          console.log(this.sessions)
          localStorage.setItem('logSession', this.sessions)
          // Cookies.set('logSession', JSON.stringify(this.sessions))
        })
        .catch((e) => {
          reject(e)
        })
    },
    curTop(index) {
      this.curts = index
      console.log(this.curts)
      switch (this.curts) {
        case 0:
          this.queryParams.pageNum = 1
          this.keyword = ''
          this.geAppingtList()
          break
        case 1:
          this.queryParams.pageNum = 1
          this.keyword = ''
          this.getApplyedList()
          break
      }
    },
    /** 待办 */
    geAppingtList() {
      this.loading = true
      getAppingTasks(
        Object.assign({
          query: this.queryParams,
          entity: {
            keyword: this.keyword,
          },
        })
      ).then((response) => {
        this.typeList = response.data.rows
        this.total = response.data.total
        this.loading = false
      })
    },
    // 已办
    getApplyedList() {
      this.loading = true
      getApplyedTasks(
        Object.assign({
          query: this.queryParams,
          entity: {
            keyword: this.keyword,
          },
        })
      ).then((response) => {
        this.typeList = response.data.rows
        this.total = response.data.total
        this.loading = false
      })
    },

    //分页
    pagination() {
      switch (this.curts) {
        case 0:
          this.geAppingtList()
          break
        case 1:
          this.getApplyedList()
          break
      }
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: '0',
        remark: undefined,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.pagination()
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.dictId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    handleClick(row) {
      localStorage.setItem('taskData', JSON.stringify(row))
      localStorage.setItem('businessKey', row.businessKey)
      localStorage.setItem('processInstanceId', row.processInstanceId)
      console.log(row)
    },
    replactJson(data) {
      return JSON.parse(data)
    },
    filterHandler(value, row, column) {
      const property = column['property']
      console.log(property)
      return row[property] === value
    },
  },
}
</script>

<style lang="less" scopted>
.leftCont {
  margin: 10px 5px 10px 15px;
  .task-left1 {
    background-color: #fff;
  }
  .task-left2 {
    background-color: #fff;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
  }
  .btn-cur {
    line-height: 40px;
    width: 70px;
    text-align: center;
    border-radius: 3px;
    margin: 8px 10px 10px 10px;
    color: #2f2f2f;
    // border: 1px solid #1890ff;
    cursor: pointer;
  }
}
.pagination-container {
  background-color: #f5f5f7 !important;
}
</style>